<template>
  <el-row>
    <el-col v-for="item in menuList" class="menu">
      <el-link @click="toPage(item.url)" :disabled="item.disabled ? item.disabled : false" :type="routeUrl === item.url ? 'success' : 'default'" :underline="false"
               style="width: 100%;">
        <el-row>
          <el-col :span="24" style="text-align: center">
            <svg class="icon" aria-hidden="true" :style="{fontSize: iconSize ? iconSize + 'rem': '1.6rem'}">
              <use :xlink:href="(routeUrl === item.url ? '#'+ item.icon +'-fill' : '#' + item.icon)"></use>
            </svg>
          </el-col>
          <el-col :span="24" style="text-align: center" v-if="item.name">{{item.name ?item.name : ''}}</el-col>
        </el-row>
      </el-link>
    </el-col>
  </el-row>
</template>
<script>
import {ref,unref, getCurrentInstance, watch, reactive, onMounted} from "vue";
import {ElMessage, ElMessageBox} from 'element-plus';
import {useRouter} from "vue-router";
import { useUserStore } from '@store/modules/useUserStore';

export default {
  name: "index",
  props:["menuList","routeUrl","iconSize"],
  //v-model:
  emits:["update:routeUrl"],
  components:{
  },
  setup(props ,content){
    const router = useRouter()
    const {proxy} = getCurrentInstance();
    const userStore = useUserStore()
    let data = {

    }
    //监听
    watch(() => [props.info], ([newInfo],[oldInfo]) => {
      // if (newInfo){
      //   Object.assign(data.form, newInfo)
      // content.emit('update:info',newInfo)
      // }
    })
    onMounted(async () => {
    })
    let methods = {
      toPage(url) {
        content.emit('update:routeUrl', url)
        router.push({
          path: url,
        })
      },
    }

    return {
      proxy,
      router,
      userStore,
      ...data,
      ...methods
    }
  }
}
</script>

<style lang="scss" scoped>
.menu {
  //margin-bottom: 10px;
  padding: 10px 0;
}
</style>
